<template>
	<div>
		<div class='container'>
		    <div class='top-back'>
			   <div class='top-banner'>
				 <img src='../../../assets/image/backsubmit.png'></img>
			   </div>
			   <div class='top-title'>试卷提交成功！</div>
			   <div class='top-contain'>
				 <div class='top-left'>
					<div class="top-all">习题共 {{arr.length}}道</div>
					<div class='yes'>正确 {{yescount}}道</div>
					<div class='no'>错误 {{wrongcount}}道</div>
					<div class='score'>满分 {{testPaper.score}}</div>
					<div class='passed_score'>分数线 {{testPaper.passed_score}}</div>
				 </div>
				 <div class="markfix">
				   <!-- <div> -->
				   <div class='top-right'>
					 <!-- <div class='right-title'>正确率</div>
					 <div class='right-number'>{{yeslv}}%</div> -->
						 <div id="layer03_right" style="width:50%;" class="layer03-panel">
							<div id="layer03_right_chart01" class="layer03-right-chart">
								<canvas width="100" height="100"></canvas>
							</div>
						 </div>
				   </div>
				  
				   <div class="youmark">你的分数 {{mark}}</div>
				 </div>
			  </div>
		    </div>
		</div>


    <!-- 选项 -->
    <div class="option clearfix">
      <div class="option-every" v-for="(item,index) in record" :class='item.result==1||item.result=="1"?"":"answer-card-every-wrong"' @click="everyan(index)">{{index+1}}</div>
    </div>

    <!-- 返回直播页面 -->
    <div class="backzbo">
      <div class="wrongbut bottombut" @click="anslysis">错题解析</div>
      <div class="backbut bottombut" @click="backz">返回直播间</div>
    </div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				id:'',  //课程id
				zbo:'',  //0回放  1直播
				gid:'',  //班级id
				submitfail:false,
				arr:'',  // 记录你的答案和正确答案
				record:[],  //记录题目
				testPaper:'',  // 满分  分数线
				test_id:'',  //试卷id
				yescount:0,  //正确数
				wrongcount:0,  //错误数
				mark:'',  //分数
				yeslv:'',  //正确率
				urlpath:'',
			};
		},
		
		methods: {
			// 点击每题解析
			everyan:function(index){
				var that = this;
				that.$router.push({
					path: '/anslysis?wrong=0&testid='+that.test_id+'&gid='+that.gid+'&zbo='+that.zbo+'&id='+that.id+'&sort='+index+'&url='+that.urlpath+'',
				})
			},
			// 点击错题解析
			anslysis:function(){
				var that = this;
				that.$router.push({
					path: '/anslysis?wrong=1&testid='+that.test_id+'&gid='+that.gid+'&zbo='+that.zbo+'&id='+that.id+'&url='+that.urlpath+'&sort=',
				})
			},
			// 返回直播间
			backz:function(){
				var that = this;
				if(that.zbo == 0 || that.zbo == '0'){
					that.$router.push({
						path: '/demand?cid='+that.gid+'&id='+that.id+'&zbo=0&answtype=1&url='+that.urlpath+'',
					})
				}else{
					that.$router.push({
						path: '/demand?cid='+that.gid+'&id='+that.id+'&zbo=1&answtype=1&url='+that.urlpath+'',
					})
				}
			},
			submitan() {
				var thatstate = this.$store.state;
				var that = this;
				this.axios({
					method:'POST',
					url:thatstate.url+'Xiaoqi/uploadExam',
					data:{
						record:JSON.stringify(that.record),
						course_id:that.id,  //课程id
						exam_id:that.test_id, //该试卷的id exam_id
						score:that.testPaper.score,//满分
						passed_score:that.testPaper.passed_score,//分数线
						mark: that.mark//分数
					},
				})
				.then((res)=>{
					// console.log(type);
					// console.log(res);
					if(res.data.errcode == 0 ||res.data.errcode == '0'){
						// if()
					}
					// console.log(that.teacher);
				}).catch((err)=>{
				   console.log(err)
				})
			},
			drawLayer03Right(canvasObj,colorValue,rate){
				var ctx = canvasObj.getContext("2d");
				
				var circle = {
					x : 50,    //圆心的x轴坐标值
					y : 50,    //圆心的y轴坐标值
					r : 45      //圆的半径
				};

				ctx.beginPath();
				ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2)
				ctx.lineWidth = 8;
				// ctx.strokeStyle = 'red';
				ctx.strokeStyle = '#BADFFF';
				ctx.stroke();
				ctx.closePath();

				ctx.beginPath();
				ctx.arc(circle.x,circle.y,circle.r,1.5*Math.PI,(1.5+rate*2)*Math.PI)
				ctx.lineWidth = 8;
				ctx.lineCap = 'round';
				ctx.strokeStyle = colorValue;
				ctx.stroke();
				ctx.closePath();
				
				ctx.fillStyle = '#fff';    //字颜色
				ctx.font = '16px Calibri';
				// ctx.fontWeight = '600';
				ctx.fillText(rate*100+'%',circle.x-15,circle.y+15);
				ctx.fillText('正确率',circle.x-24,circle.y-5);

			}
		},
		destroyed(){
			// 记录你的答案和正确答案
			window.sessionStorage.removeItem('arr');
			//记录题目
			window.sessionStorage.removeItem('record');
			// 满分  分数线
			window.sessionStorage.removeItem('testPaper');
		},
		mounted(){
			this.sdk.getJSSDK('','',this.$store.state.url);	
			var that = this;
			
			that.zbo = that.$route.query.zbo;
			that.id = that.$route.query.id;
			that.gid = that.$route.query.gid;
			that.urlpath = that.$route.query.url;
			// 试卷id
			that.test_id = that.$route.query.testid;
			if(window.sessionStorage.arr){
			  that.arr = JSON.parse(window.sessionStorage.getItem('arr')).arr;
			    // console.log(that.arr);
				//记录题目
				if(window.sessionStorage.record){
					that.record = JSON.parse(window.sessionStorage.getItem('record')).answer;
				}else{
					that.submitfail = true;
				}
				// 满分  分数线
				if(window.sessionStorage.testPaper){
					that.testPaper = JSON.parse(window.sessionStorage.getItem('testPaper'));
				}else{
					that.submitfail = true;
				}
				
				if(that.arr!=''&&that.testPaper!=''&&that.record!=''){
					for(var i=0;i<that.record.length;i++){
						if(that.record[i].result == 0 || that.record[i].result == '0'){
							that.wrongcount = parseInt(that.wrongcount)+1
						}else{
							that.yescount = parseInt(that.yescount)+1
						}
					}
				}
				// console.log(that.arr.length);
				// 每道题的分数
				var everymark = Math.round(parseInt(that.testPaper.score)/parseInt(that.arr.length));
				
				// 分数
				that.mark = everymark*that.yescount;
				// console.log(that.mark);
				
				// 正确率
				// that.yeslv = Math.round((parseInt(that.yescount)/parseInt(that.arr.length)));
				that.yeslv = (Math.round((parseInt(that.yescount)/parseInt(that.arr.length))*100))/100;
				
				// console.log(that.yeslv);
				that.drawLayer03Right($("#layer03_right_chart01 canvas").get(0),"#fff",that.yeslv);       //外圈颜色
				// 提交
				that.submitan();
			}else{
				that.submitfail = true;
			}
		}
	}
</script>

<style scoped="scoped">
.top-back{
  width: 100%;
  height: 4.5rem;
  position: relative;
}
.top-back .top-banner{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.top-back .top-banner img{
  width: 100%;
  height: 100%;
}
.top-back .top-title{
  position: absolute;
  top: .58rem;
  left: .39rem;
  font-size: .62rem;
  color: #fff;
  font-weight: 600;
}
.top-back .top-contain{
  position: absolute;
  top: 1.57rem;
  left: .39rem;
  right:.91rem;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: .3rem;
}
.top-back .top-contain .top-left div{
  margin-bottom: .1rem;
}
.markfix{

}
.top-right{
  width:2rem;
  height: 2rem;
  /* border-radius: 50%; */
  /* border:.14rem solid #fff; */
  text-align: center;
  color: #fff;
  position: relative;
}
/* .el-progress{
	width: 100%;
	height: 100%;
	position: absolute;
}
.el-progress-circle{
	width: 100% !important;
	height: 100% !important;
} */
.right-title{
  font-size: .24rem;
  margin-top: .35rem;
}
.right-number{
  font-size: .5rem;
  font-weight: 600;
}
.markfix .youmark{
  margin-top: .1rem;
}

.option{
	margin-top: .4rem;
    padding-bottom: 1rem;
}

.option .option-every{
	border:1px solid #CCCCCC;
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	color: #3877F6;
	font-size: .34rem;
    line-height: .9rem;
    text-align: center;
    float: left;
    margin-left: .3rem;
    margin-top: .2rem;
}

.option .option-every.answer-card-every-wrong{
	color: #FE2326 !important;
}

/*返回直播页面*/
.backzbo{
  width: 92%;
  height: 1rem;
  position: fixed;
  bottom: 0;
  left: 50%;
  margin-left: -46%;
  display: flex;
  justify-content: space-around;
}

.bottombut{
  width: 45%;
  height: .68rem;
  border-radius: .08rem;
  text-align: center;
  color: #fff;
  font-size: .26rem;
  line-height: .68rem;
}


.backzbo .wrongbut{
  background: #FE2326;
}

.backzbo .backbut{
  /*width: 100%;*/
  background: #3877F6;
  
}
</style>
